<template>
  <div class="base-echart">
    <div ref="echartRef" class="echart"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import type { EChartsOption } from 'echarts'
import ChinaJSON from '../data/china.json'
import { registerMap } from 'echarts'
//将图标配置抽取到外部配置文件中

interface IProps {
  option: EChartsOption
}
echarts.registerMap('china', ChinaJSON as any)
const props = defineProps<IProps>()
const echartRef = ref<HTMLElement>()
onMounted(() => {
  const echartInstance = echarts.init(echartRef.value!, 'light', {
    renderer: 'canvas'
  })
  echartInstance.setOption(props.option)
  //缩放
  window.addEventListener('resize', () => {
    echartInstance.resize()
  })
})
</script>

<style lang="less" scoped>
.echart {
  height: 300px;
}
</style>
